<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<style type="text/css">
#div1{
margin: 20px;

}
img{
width: 100%;
margin-bottom: 10px;
}

#but{
text-align: center;

}
#bigdiv{
margin-right:auto;
margin-left:auto;

width: 800px;
height: 800px;
border: 5px solid red;
}
a{
color: black;
}
</style>
</head>
<body>
<div id="bigdiv">
<div id="div1"><a href="../index.jsp">交流论坛</a> 》发布帖子</div>
<!-- Unnamed (水平线) -->
      <img id="u6_line" class="img " src="../img/u199_line.png"/>
     
      <div class="modal-body">
   
<form action="../addPost">
<table style="line-height: 50px;">

 <tr><td> <h3>发布帖子</h3></td></tr>
<tr><td>版块(*):</td><td><select name="bor_name" v-model="selected" class="form-control"  id="bor_id" style="width: 450px;margin-left: 20px;" v-on:click="showPost()"  >
						 <option value="0"  selected="selected" >请选择查找版块</option> 	
						   <option v-for="list in data"  v-bind:value="item.value" value="{{list.bor_id}}">{{list.bor_name}}</option> 
					</select></td></tr>
<tr><td>主题(*):</td><td><input type="text" name="ptmain" id="ptmain" class="form-control" placeholder="请输入您要发表的主题" style="width: 450px;margin-left: 20px;"></td></tr>
<tr><td>发布人:</td><td><input type="text" class="form-control" id="author_id" name="author_id" style="width: 450px;margin-left: 20px;" value="${obj.uname }"></td></tr>
<tr><td>来源:</td><td><input type="text" name="source" id="source" class="form-control" placeholder="请输入您发表信息的来源" style="width: 450px;margin-left: 20px;"></td></tr>
<tr><td>内容: &nbsp;</td><td><textarea cols="66" rows="4"  id="content" name="content" id="reasons" placeholder="请输入您发表的内容" style="width: 450px;margin-left: 20px;"></textarea></td></tr>
</table>
</form>
     
        </div>
      <div id="but">
 <button type="button" class="btn btn-primary"  data-toggle="button" id="button" class="but" onclick="getBack()">返回</button> 
<!-- <button type="button" class="btn btn-primary" data-dismiss="modal">发表</button> -->
<input type="button" class="btn btn-primary" class="but" value="发表" v-on:click="addPost()" data-toggle="modal" data-target="#myModal">
</div>
   </div> 
   
   <!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">发布成功</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="getBack()">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
function getBack(){
	window.location.href="../index.jsp";
}

var exm=new Vue({
	el:"#bigdiv",
	data:{
		data:"",
		selected:'',
	},
	methods:{
	//发帖子
		addPost:function(){
			 var bor_id=$("#bor_id").val();
				var ptmain=$("#ptmain").val();
			 	var author_id=$("#author_id").val(); 
				var source=$("#source").val();
				var content=$("#content").val();
			
				$.ajax({
					url:'../addPost',
					type:'post',
					data:{bor_id:bor_id,ptmain:ptmain,author_id:author_id,source:source,content:content},
					dataType:'json',
					success:function(res){
						alert("发帖成功");
					}
				})
		},
		//下拉列表
		showPost:function(){
			var dom=this;
			$.ajax({
				url:'../showBored',
				type:'post',
				dataType:'json',
				success:function(res){			
					dom.data=res.showBored
				}
			})
		}
	},
	created:function(){
		this.showPost();
	}
})

</script>
</html>